<!DOCTYPE HTML>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

	<head>
		<meta charset="UTF-8">
		<title>ueditor demo</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			#box {
				margin: 30px 15px;
			}
			
			.title {
				width: 100%;
				height: 30px;
				border-radius: 4px;
				border: 1px solid #ccc;
				margin-bottom: 15px;
				text-indent: 10px;
				outline: none;
			}
			
			.btn {
				width: 75%;
				display: block;
				margin: 15px auto;
				padding: 7px 0;
				border: 1px solid #CCC;
				border-radius: 4px;
				color: #333;
				background-color: #FFF;
				box-shadow: 0 0 7px rgba(0, 0, 0, .6);
				font-size: 24px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<input type="text" placeholder="请输入标题" class="title" id="title" />
			<div id="editor"></div>
			<button id="btn1" class="btn">发布</button>
		</div>
		<!-- 配置文件 -->
		<script type="text/javascript" src="js/wangEditor.min.js"></script>
		<script src="js/xss.js" type="text/javascript"></script>
		<!-- 编辑器源码文件 -->
		<!-- 实例化编辑器 -->
		<script type="text/javascript">
			var title = document.getElementById("title"); // 标题
			var E = window.wangEditor
			var editor = new E('#editor');
			var filterHtml = '';
			editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024
			editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
			editor.create()
			document.getElementById('btn1').addEventListener('click', function() {
				// 读取 html
				var html = editor.txt.html()
				filterHtml = filterXSS(html)
				var data = {
					articleTitle: title.value,
					articleContent: filterHtml
				}
				console.log(data)
				ajaxPost('http://localhost:8080/wxchat/superadmin/addArticle', data, function(res){
					console.log(res)
				})
			}, false)

			function ajaxPost(url, data, fn) {
//				return new Promise(function(resolve, reject) {
					var xhr = new XMLHttpRequest();
					xhr.open("POST", url, true);
					xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
					xhr.onreadystatechange = function() {
						if(xhr.readyState == 4 && xhr.status == 200) {
							fn.call(this, xhr.responseText);
//							resolve(this, xhr.responseText)
//						} else {
//							reject(this, xhr.readyState)
						}
					};
					xhr.send(data);
//				})

			}
		</script>
	</body>

</html>